<template>
<!-- 公共头部 -->
<common-head></common-head>
	
<view class="content">
	<view class="item">
		<view class="txt">体验方案</view>
		<view class="tips">根据您的情况，这是适合您的方案</view>
	</view>
	<view class="video-box">
		<!-- <video class="myvideo" src="" controls></video> -->
		<image class="video-img" src="https://build.gzwhir.com/zygzmr202410252905/appImages/img10.png" mode="widthFix"></image>
	</view>
	<image class="s-img" src="https://build.gzwhir.com/zygzmr202410252905/appImages/s-1.png" mode="widthFix"></image>
	<view class="item mt80">
		<view class="txt">全面方案</view>
		<view class="tips">使用全面方案，就能达到「以下」效果</view>
	</view>
	<image class="s-img" src="https://build.gzwhir.com/zygzmr202410252905/appImages/s-2.png" mode="widthFix"></image>
	<image class="s-img" src="https://build.gzwhir.com/zygzmr202410252905/appImages/s-3.png" mode="widthFix"></image>
	<image class="s-img" src="https://build.gzwhir.com/zygzmr202410252905/appImages/s-4.png" mode="widthFix"></image>
	<image class="s-img" src="https://build.gzwhir.com/zygzmr202410252905/appImages/s-5.png" mode="widthFix"></image>
	<image class="s-img" src="https://build.gzwhir.com/zygzmr202410252905/appImages/s-6.png" mode="widthFix"></image>
	<image class="s-img" src="https://build.gzwhir.com/zygzmr202410252905/appImages/s-7.png" mode="widthFix"></image>
	
	<view class="item mt80">
		<view class="txt">品质优势</view>
		<view class="tips">国际一级规范生产，官方认证</view>
	</view>
	<view class="info-box">
		<view class="main1">
			<view class="num">01</view>
			<view class="txt">公司简介</view>
			<view class="tips">嘉瑟琳是一家产品+教育+为一体的产品运营公司专注“问题肌”量肤定制处方调肤品牌</view>
		</view>
		<view class="main1">
			<view class="num">02</view>
			<view class="txt">嘉瑟琳理念</view>
			<view class="tips">在嘉瑟琳护肤如此简单：愿承担所有复杂，让护肤变得简单，让每位女性拥有爱自己的能力&变美的权力你购买的不单是一套护肤品，而是一份自信。</view>
			<view class="tips">你购买的不是一套护肤品，是一份对生活的态度。我们想让每个女性都能看见光、成为光、让她发光。</view>
		</view>
		<view class="main1 main2">
			<view class="num">03</view>
			<view class="txt">公司背书</view>
		</view>
		<swiper class="main2-swiper" circular indicator-dots>
			<swiper-item class="main2-swiper-item">
				<image class="img" src="https://build.gzwhir.com/zygzmr202410252905/appImages/img6.png" mode=""></image>
				<view class="txt-box">109项产品认证</view>
			</swiper-item>
			<swiper-item class="main2-swiper-item">
				<image class="img" src="https://build.gzwhir.com/zygzmr202410252905/appImages/img6.png" mode=""></image>
				<view class="txt-box">109项产品认证</view>
			</swiper-item>
			<swiper-item class="main2-swiper-item">
				<image class="img" src="https://build.gzwhir.com/zygzmr202410252905/appImages/img6.png" mode=""></image>
				<view class="txt-box">109项产品认证</view>
			</swiper-item>
		</swiper>
	</view>
	
	<!-- 小礼品弹窗 -->
	<uni-popup ref="popupRef" type="center">
		<view class="popup-box">
			<view class="title-box">
				<view class="title">领取您的<view class="bg">洗漱包</view></view>
				<image class="img" src="@/static/images/icon7.png" mode=""></image>
			</view>
			<view class="item">
				<image class="item-l" src="@/static/images/icon10.png" mode=""></image>
				<input class="item-r" type="text" placeholder-class="iptplc" placeholder="请输入您的姓名" />
			</view>
			<view class="item">
				<image class="item-l" src="@/static/images/icon9.png" mode=""></image>
				<input class="item-r" type="text" placeholder-class="iptplc" placeholder="请输入您的手机号码" />
			</view>
			<view class="item">
				<image class="item-l" src="@/static/images/icon8.png" mode=""></image>
				<input class="item-r" type="text" placeholder-class="iptplc" placeholder="请输入您的所在城市" />
			</view>
			<view class="tips">*留下您的信息，我们将在48小时内安排专人回访</view>
			<view class="btn-box">
				<view class="btn cancel-btn" @click="closePopup">取消</view>
				<view class="btn submit-btn" @click="closePopup">提交</view>
			</view>
		</view>
	</uni-popup>
	
	
	<!-- 底部固定 -->
	<view class="foot-fix">
		<view class="btn" @click="openPopup">领取伴手礼</view>
	</view>
	
</view>
</template>

<script setup>
	import { ref } from 'vue'
	let popupRef = ref('')
	let openPopup = () => {
		popupRef.value.open()
	}
	let closePopup = () => {
		popupRef.value.close()
	}
</script>

<style lang="scss">
.content{
	padding: 40rpx 40rpx 220rpx;
	
	.s-img{
		margin-top: 40rpx;
		width: 100%;
	}
	.mt80{
		margin-top: 80rpx;
	}
	.item{
		position: relative;
		
		&::before{
			content: "";
			width: 40rpx;
			height: 40rpx;
			border-radius: 40px;
			background: linear-gradient(45deg, #f2f8f9, #b1eaf2);
			position: absolute;
			left: 22%;
			top: -5%;
			z-index: -1;
		}
		.txt{
			font-size: 42rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 16rpx;
		}
		.tips{
			font-size: 24rpx;
			color: #555;
		}
	}
	.video-box{
		margin-top: 40rpx;
		// .myvideo{
		// 	width: 100%;
		// }
		.video-img{
			width: 100%;
			border-radius: 10rpx;
		}
	}
	
	.info-box{
		background: #fff;
		border-radius: 10rpx;
		padding: 36rpx 30rpx;
		margin-top: 40rpx;
		
		.main1{
			margin-bottom: 30rpx;
			padding-bottom: 40rpx;
			border-bottom: 2px solid #f5f5f5;
			.num{
				font-size: 40rpx;
				font-weight: bold;
				background: linear-gradient(to bottom, #aae9f2, transparent);
				-webkit-background-clip: text;
				background-clip: text;
				color: transparent;
			}
			.txt{
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 20rpx;
				margin-top: -24rpx;
			}
			.tips{
				font-size: 24rpx;
				color: #555;
				line-height: 42rpx;
			}
		}
		.main2{
			border-bottom: none;
			margin-bottom: 0rpx;
		}
		.main2-swiper{
			width: 100%;
			height: 830rpx;
			.main2-swiper-item{
				text-align: center;
				.img{
					width: 500rpx;
					height: 704rpx;
				}
				.txt-box{
					font-size: 24rpx;
					color: #333;
					margin-top: 20rpx;
				}
			}
			
		}
	}
}



.popup-box{
	width: 640rpx;
	border-radius: 30rpx;
	background: #fff;
	padding: 40rpx;
	box-sizing: border-box;
	position: relative;
	
	.title-box{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 40rpx;
		
		.title{
			font-size: 36rpx;
			color: #333;
			font-weight: 500;
			display: flex;
			justify-content: center;
			.bg{
				background: url("@/static/images/bg1.png") no-repeat left 40rpx;
				background-size: contain;
				padding-bottom: 10rpx;
			}
		}
		.img{
			width: 42rpx;
			height: 35rpx;
			margin-left: 12rpx;
		}
	}
	
	.item{
		border: 1px solid #b9c0ca;
		border-radius: 60px;
		display: flex;
		align-items: center;
		padding: 20rpx 36rpx;
		margin-bottom: 20rpx;
		position: relative;
		
		.item-l{
			width: 30rpx;
			height: 30rpx;
			margin-right: 20rpx;
		}
		.item-r{
			flex: 1;
			
			.iptplc{
				font-size: 28rpx;
				color: #b2b9c4;
			}
		}
	}
	.tips{
		font-size: 24rpx;
		color: #888;
	}
	.btn-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;
		
		.btn{
			width: 48%;
			height: 84rpx;
			border-radius: 84px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			color: #333;
		}
		.cancel-btn{
			background: #f5f5f5;
		}
		.submit-btn{
			background: #cfecf1;
		}
	}
}




.foot-fix{
	height: 170rpx;
	width: 100%;
	padding: 0 40rpx;
	box-sizing: border-box;
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	
	.btn{
		height: 90rpx;
		border-radius: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333;
		font-size: 28rpx;
		font-weight: 500;
		width: 100%;
		background: #aae9f2;
	}
}
</style>
